<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="工单编号" prop="workOrderCode">
            {{ form.workOrderCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workShopName">
            {{ form.workShopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="lineName">
            {{ form.lineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编号" prop="prodCode">
            {{ form.prodCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品名称" prop="prodName">
            {{ form.prodName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划产量" prop="planNumber">
            {{ form.planNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实际产量" prop="actualNumber">
            {{ form.actualNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位" prop="unit">
            {{ form.unit }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划开始时间" prop="planStartTime">
            {{ form.planStartTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="计划结束时间" prop="planEndTime">
            {{ form.planEndTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status">
            {{ work_order_status_obj[form.status] }}
          </el-form-item>
        </el-col>
        <el-col
          :span="6"
          v-if="['IN_PRODUCTION', 'COMPLETED'].includes(form.status)"
        >
          <el-form-item label="确认生产时间" prop="statusTime">
            {{ form.statusTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="['COMPLETED'].includes(form.status)">
          <el-form-item label="完工时间" prop="statusTime">
            {{ form.statusTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="['CANCELLED'].includes(form.status)">
          <el-form-item label="取消时间" prop="statusTime">
            {{ form.statusTime }}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="ERP订单编号" prop="orderCode">
            {{ form.orderCode }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来源" prop="source">
            {{ order_source_obj[form.source] }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="报工记录" name="first">
        <workReportRecord
          ref="workReportRecordRef"
          :datas="{}"
        ></workReportRecord>
      </el-tab-pane>
      <el-tab-pane label="交接班记录" name="second">
        <changeShifts ref="changeShiftsRef" :datas="form"></changeShifts>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="Data">
import { listWorkOrder } from "@/api/base/workOrder/workOrder";
import { nextTick, reactive, useAttrs } from "vue";
import changeShifts from "./components/changeShifts.vue";
import workReportRecord from "./components/workReportRecord.vue";
const { proxy } = getCurrentInstance();
let { work_order_status } = proxy.useDict("work_order_status");
const { order_source } = proxy.useDict("order_source");
const work_order_status_obj = computed(() => {
  let obj = {};
  work_order_status.value.forEach((element) => {
    obj[element.value] = element.label;
  });
  return obj;
});

const order_source_obj = computed(() => {
  let obj = {};
  order_source.value.forEach((element) => {
    obj[element.value] = element.label;
  });
  return obj;
});

const attrs = useAttrs();
const activeName = ref("first");
const parentHandleType = ref("add");
const loading = ref(false);
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const data = reactive({
  form: {},
});

const { form } = toRefs(data);
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      cancel();
    },
  },
  {
    text: "确 定",
    theme: "primary",
    handle: () => {
      submitForm();
    },
    loading: false,
  },
]);

function handleClick() {}

function getWorkOrderList(workOrderCode) {
  listWorkOrder({ workOrderCode }).then((res) => {
    form.value = res.rows[0];
  });
}

function cancel() {
  emit("close");
}

onMounted(async () => {
  const { data } = attrs;
  getWorkOrderList(data.row.workOrderCode);
  parentHandleType.value = data?.type;
  actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
  ];
  emit("setActions", actions.value);
});
</script>
<style lang="scss" scoped>
.wordOrderDiv {
  display: flex;
  justify-content: space-between;
}
:deep(.tableTrayQuality .el-form-item) {
  margin-bottom: 0 !important;
}
:deep(.el-table table tr th.start div:before) {
  content: "*";
  color: red;
}
</style>
